<template>
	<view class="ranking">
		<Header :style="isScroll===0 ? '' : 'display:none;'"></Header>
		<TabHeader :style="isScroll===1 ? '' : 'display:none;'"></TabHeader>
		<scroll-view :style="isScroll===0 ? '' : 'width:438rpx;'" class="headerScroll" scroll-x="true" enable-flex>
			<view v-for="item in titleList" :key="item.id" @click="isCheck=item.id" class="scroll-item" :class="{'active':isCheck===item.id}">{{item.title}}</view>
			<view class="scroll-item">新品榜</view>
			<view class="scroll-item">厂商榜</view>
		</scroll-view>
		<scroll-view :style="isScroll===0 ? '' : 'height:994rpx;'"  @scrolltoupper="scrollTop" @scroll="scrolling" class="mainScroll" scroll-y="true" enable-flex>
			<view v-for="(rank,index) in rankList" :key="rank.id" class="scroll-Item">
				<view class="num">{{index+1}}</view>
				<view class="right">
					<image :src="rank.icon.url" class="iconImg"></image>
					<view class="rightBody">
						<text class="rightTitle">{{rank.title}}</text>
						<view class="contents">
							<view class="c-left">
								<image src="../../static/start.png" mode=""></image>
								<text>{{rank.stat.rating.score}}</text>
							</view>
							<view class="c-right" v-for="tag in rank.tags.slice(0,2)" :key="tag.id">
								<text>{{tag.value}}</text>
								<text class="bot"> · </text>
							</view>
						</view>
					</view>
					<view class="rightButton">
						获取
					</view>
				</view>
			</view>
			
		</scroll-view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				isScroll:0,
				isCheck:0
			};
		},
		mounted(){
			this.getRankData()
		},
		methods:{
			// 获取动态数据
			getRankData(){
				this.$store.dispatch('getRankData')
			},
			// 滚动监听
			scrolling(e){
				if(this.isScroll===1)return
				if(e.detail.scrollTop>20){
					this.isScroll=1
				}
				// console.log(this.isScroll);
			},
			// 监听触顶
			scrollTop(){
				this.isScroll=0
				// console.log(this.isScroll);
			}
		},
		computed:{
			...mapState({
				rankData:state=>state.ranking.rankData
			}),
			// 数据整理
			titleList(){
				let arr = [...this.rankData]
				return arr.map((item,index)=>{
					return {
						title:item.title,
						id:index
					}
				})
			},
			// 当前展示的数组
			rankList(){
				let arr = [...this.rankData]
				return arr[this.isCheck]?.list
			}
			
		}
	}
</script>

<style lang="stylus">
	.ranking
		.headerScroll
			margin-left 32rpx
			display flex
			width calc(100vw - 32rpx)
			height 90rpx
			justify-content space-between
			white-space nowrap
			padding-bottom 6rpx
			.scroll-item
				position relative
				font-size 36rpx
				margin 0 32rpx
				line-height 90rpx
				color #868C92
				&.active
					font-weight 700
					color #000000
					&::after
						content ""
						position absolute
						background-color #15c5cc
						border-radius 6rpx
						bottom 12rpx
						left: 50%;
						transform: translateX(-50%);
						width 50rpx
						height 6rpx
		.mainScroll
			height calc(100vh - 220rpx)
			width calc(100vw - 32rpx)
			// background-color #000000
			
			margin-right 32rpx
			.scroll-Item
				display flex
				align-items center
				font-size 28rpx
				.num
					font 700 36rpx ""
					width 80rpx
					text-align center
				.right
					padding 12rpx 0
					width 100%
					display flex
					align-items center
					.iconImg
						width 128rpx
						height 128rpx
						margin-right 32rpx
						border-radius 12rpx
					.rightBody
						min-height 128rpx
						display flex
						flex-direction column
						justify-content space-around
						flex 1
						.rightTitle
							display:-webkit-box;
							-webkit-box-orient:vertical;
							-webkit-line-clamp:1;
							overflow:hidden;
						.contents
							display flex
							line-height 44rpx
							align-items center
							.c-left
								margin-right 16rpx
								display flex
								flex-direction row
								align-items center
								color #15C5CC
								image
									width 22rpx
									height 22rpx
									margin-right 4rpx
								text
									font 700 28rpx ""
									line-height 36rpx
							.c-right
								color #868c92
								margin-right 12rpx
								.bot
									margin-left 12rpx
							.c-right:last-child
								.bot
									display none
					.rightButton
						width 96rpx
						height 52rpx
						padding 0 20rpx
						background-color rgba(21,197,204,.2)
						color #15C5CC
						text-align center
						line-height 52rpx
						border-radius 26rpx
							
								
									
								
								
							
							
						
					
					
			
				
			
			
</style>
